import React,{ Component } from 'react'
import { Link } from 'react-router-dom'
export default class BookContent extends Component {
  constructor(props){
    super(props)
    this.state = {
      showBtn:false
    }
  }
  handShowNextAndPrevBtn(){
    this.setState({
      showBtn: !this.state.showBtn
    })
  }
  render(){
    const {bookContent,match,next,prev} = this.props
    return (
      <div className="bookDetail">
        <div className='bookIntroHeader'>
          <div className="backBtn">
            <Link to={'/book/'+match.params.id}>
              <i className="fa fa-angle-left fa-2x" aria-hidden="true"></i>
                返回
              </Link>
          </div>
          <div className="serchResultIntro">
            {bookContent.title}
          </div>
          <div className="homeBtn">
            <Link to='/'>
              <i className="fa fa-home fa-lg" aria-hidden="true"></i>
            </Link>
          </div>
        </div>
        <div className="mainContent" onClick={this.handShowNextAndPrevBtn.bind(this)}>
            <pre>
                {bookContent.cpContent}
            </pre>
        </div>
        <div className='btnWrap'>
            { this.state.showBtn && 
                <div className="mainFooter clearFix">
                    <Link to={'/read/'+match.params.id+'/'+prev}>
                        <div className="prevBtn">
                            上一章
                        </div>
                    </Link>
                    <Link to={'/read/'+match.params.id+'/'+next}>
                        <div className="nextBtn">
                            下一章
                        </div>
                    </Link>
                </div>
            }
        </div>
      </div>
    )
  }
}
